<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <review :comment="props.row.commend" @getTable="getTable"></review>
        </template>
      </el-table-column>
      <el-table-column prop="videoName" label="视频标题">
      </el-table-column>
      <el-table-column prop="videoClassificationId" label="视频分类">
        <template slot-scope="scope">
          {{ ['学习', '运动', '搞笑', '动画', '电影', '游戏', '音乐', '生活'][scope.row.videoClassificationId] }}
        </template>
      </el-table-column>
      <el-table-column prop="resourceDescription" label="视频描述">
      </el-table-column>
      <el-table-column prop="address" label="操作" width="210">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="openVideo(scope.row)">查看视频</el-button>
          <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVideo" class="videoDialog" width="80%">
      <video class="video" preload="metadata" loop autoplay :src="dialogData.videoAddress" controls></video>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="60%">
      <el-form ref="form" :model="dialogData" label-width="80px" :rules="rules">
        <el-form-item label="视频标题" prop="videoName">
          <el-input v-model="dialogData.videoName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="视频分类" prop="videoClassificationId">
          <el-radio-group v-model="dialogData.videoClassificationId" size="small">
            <el-radio-button v-for="(item, index) in ['学习', '运动', '搞笑', '动画', '电影', '游戏', '音乐', '生活']" :label="index">
              {{ item }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="视频描述" prop="resourceDescription">
          <el-input type="textarea" autosize placeholder="请输入内容" v-model="dialogData.resourceDescription">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeUserInfo">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="deleted" width="40%">
      <span>确定删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleted = false">取 消</el-button>
        <el-button type="primary" @click="removeUserInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import review from '@/components/review/review.vue'
import { recommend, commit, stopUserVideoInfo, changeUserVideoInfo } from '@/api/table'
export default {
  components: {
    review
  },
  data() {
    return {
      userInfo: undefined,
      tableData: undefined,
      loading: false,
      dialogVideo: false,
      dialogVisible: false,
      deleted: false,
      dialogData: {
        submitUsername: undefined,
        videoName: undefined,
        videoAddress: undefined,
        videoClassificationId: undefined,
        resourceDescription: undefined,
        videoId: undefined
      },
      rules: {
        videoName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        videoClassificationId: [
          { required: true, message: '请选择出生日期', trigger: 'blur' }
        ],
        resourceDescription: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.userInfo = this.$store.getters.token
    this.getTable()
  },
  methods: {
    getTable() {
      recommend().then(res => {
        res.data.forEach(async item => {
          const data = {
            commentId: item.videoId,
            commentType: 1
          }
          const res = await commit(data)
          let i = 0
          for await (const r of res.data.map(item => commit({
            commentType: 2,
            commentId: item.commendId
          }))) {
            res.data[i++].commentList = r.data
          }
          item.commend = res.data
        })
        this.tableData = res.data
      })
    },
    openVideo(value) {
      this.dialogVideo = true
      this.dialogData = structuredClone(value)
      console.log(this.dialogData)
    },
    handleEdit(value) {
      this.dialogVisible = true
      this.dialogData = structuredClone(value)
    },
    handleDelete(value) {
      this.deleted = true
      this.dialogData = structuredClone(value)
    },
    changeUserInfo() {
      const data = {
        ...this.dialogData,
        userId: this.userInfo.userId,
        videoId: this.dialogData.videoId,
        videoDescription: this.dialogData.resourceDescription
      }
      changeUserVideoInfo(data).then(res => {
        this.$message(res.errorMessage)
        this.getTable()
        this.dialogVisible = false
      })
    },
    removeUserInfo() {
      const data = {
        userId: this.userInfo.userId,
        videoId: this.dialogData.videoId
      }
      stopUserVideoInfo(data).then(res => {
        this.$message(res.errorMessage)
        this.getTable()
        this.deleted = false
      })
    }
  }
}
</script>

<style scoped>
.video {
  width: 100%;
  height: 100%;
}

.videoDialog::v-deep .el-dialog__body {
  height: 600px;
}
</style>